<include file="public@header" />
</head>
<body>
    <div class="wrap">

        <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('Goods/setGoodsAttrPost')}">

                    <div id="form-item-box">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">属性</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="text" class="form-control" name="attr[]">
                            </div>
                        </div>
                    </div>

            <div class="form-group">
                <label class="col-sm-2 control-label"></label>
                <div class="col-md-6 col-sm-10">
                    <button type="button" onclick="addFormItem()" class="btn btn-default">增加表单项</button>
                </div>
            </div>

            <input type="hidden" name="goods_id" value="{$goods_id}">

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
                    <a class="btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
                </div>
            </div>
        </form>
    </div>
    <script src="__STATIC__/js/admin.js?v={$_static_version}"></script>
    <script>
        function addFormItem()
        {
            //获取大盒子
            const formItemBox = document.getElementById('form-item-box')

            //创建input
            const input = document.createElement("input")
            input.type = 'text'
            input.className = 'form-control'
            input.name = 'attr[]'

            //创建删除按钮
            const removeButton = document.createElement("button")
            removeButton.className = 'btn btn-danger btn-sm'
            removeButton.innerText = '移除'
            removeButton.type = 'button'
            removeButton.onclick = function () {
                removeFormItem(this)
            }

            //创建 input，button 的父元素
            const inputParent = document.createElement("div")
            inputParent.className = 'col-md-6 col-sm-10'
            inputParent.style.display = 'flex'
            inputParent.appendChild(input)
            inputParent.appendChild(removeButton)

            //创建 label 标签
            const label = document.createElement("label")
            label.className = 'col-sm-2 control-label'
            label.innerText = '属性'

            //创建最外层的div
            const formGroupDiv = document.createElement("div")
            formGroupDiv.className = 'col-md-6 col-sm-10'
            formGroupDiv.appendChild(label)
            formGroupDiv.appendChild(inputParent)

            formItemBox.appendChild(formGroupDiv)

        }

        //移除表单项
        function removeFormItem(button)
        {
            //获取大盒子
            const formItemBox = document.getElementById('form-item-box')
            formItemBox.removeChild(button.parentNode.parentNode)
        }
    </script>
</body>
</html>